<template>
  <div>
    <div
      class="draw-container"
      :style="{height: pageSettingData._papersize.heightTopx+'px'}"
      v-for="(drawerElements,index) in pages"
      :key="index"
    >
      <div
        class="header"
        :style="{paddingTop:pageSettingData._headerfooter.header.marginTopTopx+'px',
         width:pageSettingData._papersize.widthTopx+'px'
        }"
      >
        <div class="ant-col-8 left">
          <div v-if="headerFooter.header.align==='Left'">
            <span v-if="headerFooter.header.pagenum">{{ index + 1}}</span>
            <span v-if="headerFooter.header.pagenum&&headerFooter.header.total">/</span>
            <span v-if="headerFooter.header.total">{{ pageTotal }}</span>
            <span class="pl-10" v-if="headerFooter.header.date">{{headerFooter.date}}</span>
            <span class="pl-10" v-if="headerFooter.header.time">{{headerFooter.time}}</span>
          </div>
        </div>
        <div class="ant-col-8 center">
          <div v-if="headerFooter.header.align==='Center'">
            <span v-if="headerFooter.header.pagenum">{{ index + 1}}</span>
            <span v-if="headerFooter.header.pagenum&&headerFooter.header.total">/</span>
            <span v-if="headerFooter.header.total">{{ pageTotal }}</span>
            <span class="pl-10" v-if="headerFooter.header.date">{{headerFooter.date}}</span>
            <span class="pl-10" v-if="headerFooter.header.time">{{headerFooter.time}}</span>
          </div>
        </div>
        <div class="ant-col-8 right">
          <div v-if="headerFooter.header.align==='Right'">
            <span v-if="headerFooter.header.pagenum">{{ index + 1}}</span>
            <span v-if="headerFooter.header.pagenum&&headerFooter.header.total">/</span>
            <span v-if="headerFooter.header.total">{{ pageTotal }}</span>
            <span class="pl-10" v-if="headerFooter.header.date">{{headerFooter.date}}</span>
            <span class="pl-10" v-if="headerFooter.header.time">{{headerFooter.time}}</span>
          </div>
        </div>
      </div>

      <div
        class="drawer drag-over"
        :style="{
        width:pageSettingData._papersize.widthTopx+'px',
        paddingTop:pageSettingData._pagemargin.UpTopx+'px',
        paddingBottom:pageSettingData._pagemargin.DownTopx+'px',
         paddingLeft:pageSettingData._pagemargin.LeftTopx+'px',
         paddingRight:pageSettingData._pagemargin.RightTopx+'px',
        }"
      >
        <div class="both-div flex-justify-between">
          <div class="item-div">
            <div class="top-left"></div>
          </div>
          <div class="item-div">
            <div class="top-right"></div>
          </div>
        </div>
        <div
          :style="{
         backgroundImage:pageSettingData.isPrintBgImg?'url('+pageSettingData.bgImg.url+')':''}"
          class="main-body"
        >
          <div
            class="div-style"
            v-for="item in drawerElements"
            :key="item.id"
            :style="`left: ${item.left}px;top: ${item.top}px;`"
          >
            <table style="padding: 0; border-spacing: 0;">
              <tr v-if="item.eleType.includes('column')" :style="`height: ${item.heightValue}px;`">
                <td
                  :style="`
                  border: ${item.leftKey.borderWidthValue}px ${item.leftKey.borderTypeValue} ${item.leftKey.borderColorValue};
                  width: ${item.leftKey.widthValue}px;
                  background: ${item.leftKey.fillColorValue};
                  font-size: ${item.leftKey.fontSizeValue}px;
                  color: ${item.leftKey.fontColorValue};
                  text-align: ${item.leftKey.fontLCRNeat};
                  font-weight: ${item.leftKey.fontIsWeight ? 'bold' : ''};
                  font-style: ${item.leftKey.fontIsItalic ? 'italic' : ''};
                  text-decoration: ${item.leftKey.fontIsUnderline ? 'underline' : ''};
                  vertical-align: ${item.leftKey.fontTCBNeat};
                `"
                >{{ item.leftKey.innerTxt }}</td>
                <td
                  :style="`
                  border: ${item.rightValue.borderWidthValue}px ${item.rightValue.borderTypeValue} ${item.rightValue.borderColorValue};
                  width: ${item.rightValue.widthValue}px;
                  background: ${item.rightValue.fillColorValue};
                  font-size: ${item.rightValue.fontSizeValue}px;
                  color: ${item.rightValue.fontColorValue};
                  text-align: ${item.rightValue.fontLCRNeat};
                  font-weight: ${item.rightValue.fontIsWeight ? 'bold' : ''};
                  font-style: ${item.rightValue.fontIsItalic ? 'italic' : ''};
                  text-decoration: ${item.rightValue.fontIsUnderline ? 'underline' : ''};
                  vertical-align: ${item.rightValue.fontTCBNeat};
                `"
                >{{ item.rightValue.innerTxt }}</td>
              </tr>
              <tr
                v-if="item.eleType.includes('text')"
                :style="`
                height: ${item.heightValue}px;
                vertical-align: ${item.fontTCBNeat};
                border: ${item.borderWidthValue}px ${item.borderTypeValue} ${item.borderColorValue};
                width: ${item.widthValue}px;
                background: ${item.fillColorValue};
                font-size: ${item.fontSizeValue}px;
                color: ${item.fontColorValue};
                text-align: ${item.fontLCRNeat};
                font-weight: ${item.fontIsWeight ? 'bold' : ''};
                font-style: ${item.fontIsItalic ? 'italic' : ''};
                text-decoration: ${item.fontIsUnderline ? 'underline' : ''};
              `"
              >
                <td
                  :style="`
                  border: ${item.borderWidthValue}px ${item.borderTypeValue} ${item.borderColorValue};
                  width: ${item.widthValue}px;
                `"
                >{{ item.innerTxt }}</td>
              </tr>
            </table>
            <div
              class="code-and-pic"
              v-if="item.eleType.includes('leftQrcodePic')"
              :style="`height: ${item.heightValue}px; width: ${item.widthValue}px;`"
            >
              <img style="width: 100%; height: 100%;" :src="item.picUrl || imgObj.qr_code" alt />
            </div>
            <div
              class="code-and-pic"
              v-if="item.eleType.includes('leftBarcodePic')"
              :style="`height: ${item.heightValue}px; width: ${item.widthValue}px;`"
            >
              <img style="width: 100%; height: 100%;" :src="item.picUrl || imgObj.bar_code" alt />
            </div>
            <div
              class="code-and-pic"
              v-if="item.eleType.includes('topPic')"
              :style="`height: ${item.heightValue}px; width: ${item.widthValue}px;`"
            >
              <img style="width: 100%; height: 100%;" :src="item.picUrl || imgObj.pic_img" alt />
            </div>
            <div
              class="code-and-pic"
              v-if="item.eleType.includes('topDrawerRect')"
              :style="getRectStyleOf(item)"
            ></div>
            <div
              class="code-and-pic"
              v-if="item.eleType.includes('topDrawerLine')"
              :style="`
              height: ${item.heightValue}px;
              width: ${item.widthValue}px;
              background: ${item.borderColorValue};
            `"
            ></div>

            <div
              v-if="item.eleType === 'sheet'"
              :class="[ item.eleType ]"
              :style="`
                height: ${item.heightValue}px;
                width: ${item.widthValue}px;
                background: ${item.bgColor};
              `"
            >
              <table>
                <thead>
                  <tr :style="`height:${item.headHeight}px`">
                    <td
                      v-for="col in item.columns"
                      :key="col.id"
                      :style="getColStyle(col,item)"
                    >{{ col.name }}</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td
                      v-for="col in item.columns"
                      :key="col.id"
                      :style="getRowStyle(col,item)"
                    >{{ col.name }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="both-div flex-justify-between">
          <div class="item-div">
            <div class="bottom-left"></div>
          </div>
          <div class="item-div">
            <div class="bottom-right"></div>
          </div>
        </div>
      </div>

      <div
        class="header"
        :style="{marginTop:(-20-pageSettingData._headerfooter.footer.marginTopTopx)+'px',width:pageSettingData._papersize.widthTopx+'px'}"
      >
        <div class="ant-col-8 left">
          <div v-if="headerFooter.footer.align==='Left'">
            <span v-if="headerFooter.footer.pagenum">{{ index + 1}}</span>
            <span v-if="headerFooter.footer.pagenum&&headerFooter.footer.total">/</span>
            <span v-if="headerFooter.footer.total">{{ pageTotal }}</span>
            <span class="pl-10" v-if="headerFooter.footer.date">{{headerFooter.date}}</span>
            <span class="pl-10" v-if="headerFooter.footer.time">{{headerFooter.time}}</span>
          </div>
        </div>
        <div class="ant-col-8 center">
          <div v-if="headerFooter.footer.align==='Center'">
            <span v-if="headerFooter.footer.pagenum">{{ index + 1}}</span>
            <span v-if="headerFooter.footer.pagenum&&headerFooter.footer.total">/</span>
            <span v-if="headerFooter.footer.total">{{ pageTotal }}</span>
            <span class="pl-10" v-if="headerFooter.footer.date">{{headerFooter.date}}</span>
            <span class="pl-10" v-if="headerFooter.footer.time">{{headerFooter.time}}</span>
          </div>
        </div>
        <div class="ant-col-8 right">
          <div v-if="headerFooter.footer.align==='Right'">
            <span v-if="headerFooter.footer.pagenum">{{ index + 1}}</span>
            <span v-if="headerFooter.footer.pagenum&&headerFooter.footer.total">/</span>
            <span v-if="headerFooter.footer.total">{{ pageTotal }}</span>
            <span class="pl-10" v-if="headerFooter.footer.date">{{headerFooter.date}}</span>
            <span class="pl-10" v-if="headerFooter.footer.time">{{headerFooter.time}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// eslint-disable-next-line
import { Component, Vue } from "vue-property-decorator";

import { SheetColumn, PrintNodeSettings } from "@/config/print/dataStructure";
import * as settingHelper from "./center-panel/settings-helper";

import dateFormat from "@cloudpivot/common/src/utils/date";

@Component({
  name: "pre-view"
})
export default class PreView extends Vue {
  pageTotal: number = 0;
  imgObj: object = {
    qr_code: require("@/assets/images/qrcode.png"),
    bar_code: require("@/assets/images/barcode.png"),
    pic_img: require("@/assets/images/pic.png")
  };
  pageSettingData: any;
  pages: object[] = [];

  getHeaderFooter() {
    const Dates = new Date();
    const headerFooter = {
      date: "",
      time: "",
      header: {},
      footer: {}
    };
    const ss = dateFormat.dateFormat(Dates, "YYYY-MM-DD HH:mm:ss");
    headerFooter.date = ss.split(" ")[0];
    headerFooter.time = ss.split(" ")[1];
    headerFooter.header = this.fillData(
      this.pageSettingData._headerfooter.header
    );
    headerFooter.footer = this.fillData(
      this.pageSettingData._headerfooter.footer
    );

    return headerFooter;
  }
  fillData(data: any) {
    let temp = {
      align: "",
      marginTopTopx: 0,
      pagenum: false,
      total: false,
      date: false,
      time: false
    };

    temp.marginTopTopx = data.marginTopTopx;
    temp.align = data.align;
    data.items.key.forEach((m: any) => {
      switch (m) {
        case "PageNum":
          temp.pagenum = true;
          break;
        case "Total":
          temp.total = true;
          break;
        case "Date":
          temp.date = true;
          break;
        case "Time":
          temp.time = true;
          break;
      }
    });
    return temp;
  }
  get headerFooter() {
    return this.getHeaderFooter();
  }

  created() {
    // @ts-ignore
    this.pages = JSON.parse(localStorage.getItem("print_pages"));

    this.pageSettingData = settingHelper.getDefaultSettings();
    this.pageTotal = this.pages.length;
    let settingData: object[] = this.pages[0] as [];
    settingData.forEach((item: any, index: number) => {
      if (item.eleType === "pageSettings") {
        this.pageSettingData = item;
      }
    });
  }

  getColStyle(col: any, item: any) {
    const style = PrintNodeSettings.buildStyleOf(col);
    style.width = `${col.widthValue}px`;
    style.border = `${item.borderWidth}px ${item.borderColor} solid`;
    return style;
  }

  getRowStyle(col: any, item: any) {
    const style = PrintNodeSettings.buildStyleOf(col.rowSettings || col);
    style.width = `${col.widthValue}px`;
    style.border = `${item.borderWidth}px ${item.borderColor} solid`;
    return style;
  }

  getRectStyleOf(item: any) {
    const style: any = {
      height: `${item.heightValue}px`,
      width: `${item.widthValue}px`,
      background: `${item.fillColorValue}`
    };

    if (item.borders) {
      const bs = `${item.borderWidthValue}px solid ${item.borderColorValue}`;

      if (item.borders.left) {
        style["border-left"] = bs;
      }
      if (item.borders.top) {
        style["border-top"] = bs;
      }
      if (item.borders.bottom) {
        style["border-bottom"] = bs;
      }
      if (item.borders.right) {
        style["border-right"] = bs;
      }
    }

    return style;
  }
}
</script>

<style lang="less" scoped>
.draw-container {
  // width: 595px;
  // height: 842px;
  width: 100%;
  margin: 15px auto;
  background: #fff;
  position: fixed;
  overflow-x: auto;
  @media screen and (min-width: 1200px) and (max-width: 1399px) {
    max-width: 1200px;
  }
  @media screen and (min-width: 1400px) and (max-width: 1599px) {
    max-width: 1400px;
  }
  @media screen and (min-width: 1600px) and (max-width: 1890px) {
    max-width: 1600px;
  }
  @media screen and (min-width: 1900px) {
    max-width: 1900px;
  }
  .drawer {
    border: 1px solid #e5e5e5;
    padding: 36px 34px;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;

    .main-body {
      flex-grow: 1;
      margin: 0 14px;
      position: relative;
      .div-style {
        display: inline-flex;
        position: absolute;
        tr {
          word-break: break-word;
          text-align: left;
        }
      }
    }
    .both-div {
      .item-div {
        div {
          width: 15px;
          height: 20px;
          &.top-left {
            border-bottom: 1px solid rgba(0, 0, 0, 0.25);
            border-right: 1px solid rgba(0, 0, 0, 0.25);
          }
          &.top-right {
            border-bottom: 1px solid rgba(0, 0, 0, 0.25);
            border-left: 1px solid rgba(0, 0, 0, 0.25);
          }
          &.bottom-left {
            border-top: 1px solid rgba(0, 0, 0, 0.25);
            border-right: 1px solid rgba(0, 0, 0, 0.25);
          }
          &.bottom-right {
            border-top: 1px solid rgba(0, 0, 0, 0.25);
            border-left: 1px solid rgba(0, 0, 0, 0.25);
          }
        }
      }
    }
  }
  .header {
    position: absolute;
    text-align: center;
  }
  .pl-10 {
    padding-left: 10px;
  }
}

.sheet > table {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid @border-color;
  border-collapse: collapse;
  border-spacing: 0;

  td {
    border: 1px solid @border-color;
  }
}

.drag-over {
  background: #c1c1c1;
  transition: all 0.3s;
  border: none;
  .main-body {
    background: #fff;
  }
}
</style>
